import React from 'react';
import { connect } from 'dva';
import { Card, Row, Col } from 'antd';
/**
 * 	
 * 	
 * IndustryDistribution 行业分布
 * 子组件
 * IndustryDistributionList   行业分布统计表
 * IndustryDistributionCharts 行业分布图表
 */

const industryList=[
    {
		label: '申万一级',
		key: '38_1'
	}, {
		label: '证监会一级',
		key: '36_1'
	}
]

import { IECharts } from '../../../components';
const IndustryDistributionCharts = ({
    fieldList = [],
    benchName = '',
    list = [],
}) => {
    const data = []
    list.map(item => {
        const lastRatio = fieldList.find(it => it.name === '期末占比')
        const benchmarksRatio = fieldList.find(it => it.name === '投资基准占比')
        data.push({
            name: item.name,
            value: parseFloat(item[lastRatio.id]),
            ratio: parseFloat(item[benchmarksRatio.id]),
        })
    })

    const myProps = {
        option: {
            tooltip: {
                trigger: 'axis',
                formatter: "{b} : {c}%",
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }

            },
            legend: {
                data: ['期末占比', '投资基准占比'],
                bottom: 0,
                right: 0,
                textStyle: {
                    color: '#999'
                }
            },
            title: {
                text: `股票(总资产)与${benchName}指数行业分布重合度`,
                left: 20,
                textStyle: {
                    color: '#4a4a4a',
                    fontSize: 14,
                    lineHeight: 20,
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item.name),
                axisLine: {
                    lineStyle: {
                        //color: "#999"
                        color: "#4a4a4a"
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} %'
                },
                axisLine: {
                    lineStyle: {
                        //color: "#999"
                        color: "#4a4a4a"
                    }
                },
                splitLine: {     //网格线
                    show: false
                }
            },
            series: [{
                name: '期末占比',
                data: data.map(item => item.value),
                type: 'bar',
                itemStyle: {
                    normal: {
                        // color: '#5081BD'
                        color: '#85aed6'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
            },
            {
                name: '投资基准占比',
                data: data.map(item => item.ratio),
                type: 'bar',
                itemStyle: {
                    normal: {
                        //color: '#E9C87A'
                        color: '#f5a623'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
            }
            ]
        }
    }


    return (
        <div style={{ height: 310 }}>
            <IECharts {...myProps} resizable={true} />
        </div>
    )

}

import TableList from '../../../components/TableList'
import IndustrySelect from '../../../components/toolbar/IndustrySelect';

const ratioArr = ["期初占比", "期末占比", "较上期", "投资基准占比", "超低配"]
class IndustryDistribution extends React.Component {
    state = {
        data: this.props.industryDistribution,
    }
    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {

        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.cBenchCode !== this.props.cBenchCode) || (nextProps.ratioBegindate !== this.props.ratioBegindate) || (nextProps.ratioEnddate !== this.props.ratioEnddate) || (nextProps.industryID !== this.props.industryID)) {
            this.fetchData(nextProps)
        }
        if (nextProps.industryDistribution !== this.props.industryDistribution) {
            if (nextProps.industryDistribution.fieldList) {


                if (nextProps.industryDistribution.fieldList && nextProps.industryDistribution.fieldList.length) {
                    // const ratioArr = nextProps.industryDistribution.fieldList.filter(item => (item.name.indexOf('占比')>-1)||(item.name.indexOf('较上期')>-1)||(item.name.indexOf('超低配')>-1))
                    // nextProps.industryDistribution.list.map(item => {
                    //     ratioArr.map(it=>{
                    //         item[it.id] = item[it.id]&&item[it.id].toPercent()
                    //     })
                    // })
                    const ratioArr = nextProps.industryDistribution.fieldList.filter(item => (item.name.indexOf('占比') > -1) || (item.name.indexOf('超低配') > -1))
                    nextProps.industryDistribution.list.map(item => {
                        ratioArr.map(it => {
                            item[it.id] = item[it.id] && item[it.id].toPercent()
                        })
                    })
                    const ratioArrLatter = nextProps.industryDistribution.fieldList.filter(item => (item.name.indexOf('较上期') > -1))
                    nextProps.industryDistribution.list.map(item => {
                        ratioArrLatter.map(it => {
                            if (item[it.id] < 0) {
                                item[it.id] = <span className="down">{item[it.id].toPercent()}</span>
                            }
                            else if (item[it.id] === 0) {
                                item[it.id] = <span style={{ color: '#d0021b' }}>{item[it.id]}</span>
                            }
                            else {
                                item[it.id] = <span className="up">+{item[it.id].toPercent()}</span>
                            }

                        })
                    })
                }

            }
            this.setState({
                data: nextProps.industryDistribution
            })
        }
    }
    //查询数据
    fetchData = (props) => {
        this.props.dispatch({
            type: 'combinatorialAnalysis/getIndustryDistribution',
            payload: props
        })
    }
    render() {
        const {list} = this.state.data
        return (
            <Card bordered={false} className="industryDistribution">
                {
                    this.state.data.fieldList && (
                        <Row>
                            {/*<Col className='industryTable' xs={24} sm={24} md={12} lg={12} xl={12} style={{ paddingRight: 10 }}>*/}
                            <Col className='industryTable' xs={24} sm={24} md={12} lg={12} xl={12} style={{ paddingRight: 27 }}>
                                <IndustrySelect {...this.props} industryList={industryList} />
                                <TableList {...this.state.data} rowKey="name" />
                            </Col>
                            <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ paddingLeft: 10 }}>
                            {
                                list&&list.length?<IndustryDistributionCharts   {...this.state.data} benchName={this.props.benchName} />:null
                            }
                                
                            </Col>
                        </Row>
                    )
                }

            </Card>
        );
    }
}

IndustryDistribution.defaultProps = {
    lPortID: null,
    cBenchCode: null,
    ratioBegindate: null,//分类占比 开始时间
    ratioEnddate: null,//分类占比 结束时间
    ratioIndunum: null,//行业ID
    benchName: '',
    industryDistribution: {
        "fieldList": [
            {
                "id": "name",
                "name": "行业"
            },
            {
                "id": "firstRatio",
                "name": "期初占比"
            },
            {
                "id": "lastRatio",
                "name": "期末占比"
            },
            {
                "id": "increase",
                "name": "较上期"
            },
            {
                "id": "benchmarksRatio",
                "name": "投资基准占比"
            },
            {
                "id": "ultraLowDistribution",
                "name": "超低配"
            },
        ],
        "list": [
            {
                "id": 1,
                "name": "化工",
                "firstRatio": 0.23,
                "lastRatio": 0.15,
                "increase": 0.78,
                "benchmarksRatio": 0.89,
                "ultraLowDistribution": 0.32
            },
        ]
    }
}

export default connect()(IndustryDistribution)